<template>
  <div style="height: 80px;padding: 24px;margin: 12px;
    margin-bottom: 0;
    background: #fff;
    border-radius: 8px;">
    用户统计
    <div style="padding: 20px">
      <div>
        <span style="display: inline-block;width: 150px;text-align: center;font-size: 13px;color: #353a42;">{{countNum}}</span>
        <span style="display: inline-block;width: 150px;text-align: center;font-size: 13px;color: #353a42;">{{onlineNum}}</span>
      </div>
      <div>
        <span style="display: inline-block;width: 150px;text-align: center;font-size: 13px;color: #353a42;">当日用户访问总数</span>
        <span style="display: inline-block;width: 150px;text-align: center;font-size: 13px;color: #353a42;">在线用户数</span>
      </div>
    </div>

  </div>
  <!--页面搭建-杜思成-->
  <layout-card
    v-model="search"
    :filters="ismapOptions"
    headline="信息列表"
    headtitle=" "
    :hasButton="true"
    @search-change="getData"
    @search-reset="searchReset"
  >

    <table-common
      :columns="mapListColumns"
      :loading="loading"
      :pagination="pager"
      :table-data="tabledata"
      size="large"
      @current-change="changeCurrent"
      @size-change="changePageSize"
      @sort-change="sortChange"
    >
      <!-- 维护图标提示 -->
      <template #houseName="{ row }">
        <el-text type="primary" v-if="remindList.includes(row.houseId)">
          <img
            src=""
            class="img"
            width="18"
            height="18"
            data-v-fae5bece=""
            style="background-color: red"
          />
        </el-text>
        {{ row["houseName"] }}
      </template>
      <template #action="{ row }">
        <!-- 自定义操作栏示例  -->
        <el-button class="link-btn" @click="handleDetails(row)" link type="primary"
        >查看</el-button
        >
      </template>
    </table-common>
  </layout-card>
  <!-- 设置弹窗开始 -->
  <el-dialog v-model="thresholdDialogVisible" title="设置" width="600"   center align-center >
    <el-row :gutter="20" >
      <el-col :span="12" >
        <el-row :gutter="20">
          <el-col :span="12" class="rughtCol">登录用户:</el-col>
          <el-col :span="12" class="leftCol">{{tableObj.userId}}</el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="20">
          <el-col :span="8" class="rughtCol">用户姓名:</el-col>
          <el-col :span="16" class="leftCol">系统管理员</el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="20">
          <el-col :span="12" class="rughtCol">操作:</el-col>
          <el-col :span="12" class="leftCol">登录</el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="20">
          <el-col :span="8" class="rughtCol">登录时间:</el-col>
          <el-col :span="16" class="leftCol">{{tableObj.startTime}}</el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="20">
          <el-col :span="12" class="rughtCol">在线状态:</el-col>
          <el-col :span="12" class="leftCol">{{tableObj.isState}}</el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="20">
          <el-col :span="8" class="rughtCol">下线时间:</el-col>
          <el-col :span="16" class="leftCol">{{tableObj.endTime}}</el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="20">
          <el-col :span="12" class="rughtCol">用户IP:</el-col>
          <el-col :span="12" class="leftCol">{{tableObj.userIp}}</el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="20">
          <el-col :span="8" class="rughtCol">设备信息:</el-col>
          <el-col :span="16" class="leftCol">computer</el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="20" class="rughtCol">
          <el-col :span="12">操作系统:</el-col>
          <el-col :span="12" class="leftCol">Windows</el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="20">
          <el-col :span="8" class="rughtCol">浏览器信息:</el-col>
          <el-col :span="16" class="leftCol">Mozilla/5.0</el-col>
        </el-row>
      </el-col>
    </el-row>


    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="thresholdDialogVisible = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 设置弹窗结束 -->
</template>

<script lang="ts" setup>
  const onlineNum = ref('0')
  const countNum = ref('0')
  import { Search } from '@element-plus/icons-vue'
  const radio = ref(0)
  const input3 = ref('')
  const select = ref('')
  const isShow = ref(false)
  // const tableHeight = ref(window.innerHeight - 580)
  /**
   * @radioChange 单选框的改变事件
   * @author
   * @date
   * @version V1.0.0
   * @return
   */
  const radioChange = (value: number ,number : boolean)=> {
    // 选中自定义
    if (value == 1) {
      isShow.value = true
    } else { // 选中默认
      isShow.value = false
    }
    console.log(value)
    console.log(isShow.value)
  }
  import { computed, ref, reactive, onBeforeMount, nextTick } from "vue";
  import LayoutCard from "@/components/LayoutCard/index.vue";
  import TableCommon from "@/components/TableCommon/index.vue";
  import {
    houseDeleteRow,
    houseImport,
    append,
    change,
    getUserInfo,
  } from "@/api/eqpt/houseManger";
  import { mapListColumns } from "@/views/systemMonitori/userMonitor/config/columns";
  import {
    mapOptions,
    dialogOptions,
    mapListFilters,
  } from "@/views/systemMonitori/userMonitor/config/filters";
  import {
    ElMessage,

  } from "element-plus";

  import FilterBar from "@/components/FilterBar/index.vue";
  import { getResource, postResource } from "@/api/resource";

  import { useStore } from "vuex";
  // 地图控件
  import mapControl from "@/components/map/index.vue";
  import { store } from "@/components/map/mapStore";
  import {usersList,selectOnline,selectCount} from "@/api/secure/recycleUnits";

  const stores = useStore();
  const organTree = stores.state.user.organTree; // 获取树
  const isdialogOptions = ref(dialogOptions);
  const ismapOptions = ref(mapOptions);
  const ismapListFilters = ref(mapListFilters);
  const thresholdDialogVisible = ref(false);

  const addTilte = ref(""); // 弹出框名称

  // 分页和数据展示参数
  const current = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const tableObj = ref({
    userId:null,
    startTime:null,
    endTime:null,
    isState:null,
    userIp:null
  });

  const tabledata = ref([]);
  const search = ref({
    houseType:null,
    region:null,
    state:null
  });
  const pager = computed(() => ({
    currentPage: current.value,
    pageSize: pageSize.value,
    total: total.value,
    pageCount:
      Math.ceil(total.value / pageSize.value) === 0
        ? 1
        : Math.ceil(total.value / pageSize.value),
  }));

  /**
   * @functionName 分页、查询、排序、删除功能
   * @author 杜思成
   * @date 2023-08-08 17:46:09
   * @version V1.0.0
   */
  const changeCurrent = (value: number) => {
    current.value = value;
  };
  const changePageSize = (size: number) => {
    pageSize.value = size;
  };
  const order = ref([
    {
      column: "state",
      method: "asc",
    },
    {
      column: "lastUpdateTime",
      method: "desc",
    },
  ]);
  /**
   * @functionName 获取数据
   * @author 彭庆楠
   * @date 2023-08-08 17:47:31
   * @version V1.0.0
   * @return
   */
  const getData = async () => {
    console.log(search.value)
    const searchList = {
      userId: search.value?.userId,
      isState: search.value?.isState,
    };
    const playout = {
      pageNum: current.value,
      pageSize: pageSize.value,
      condition: searchList,
    };
    await usersList(playout).then((res) => {
      tabledata.value = res?.data?.list;
      total.value = res?.data?.total;
    });
  };
  /**
   * @functionName 排序事件
   * @param {any} data 传入的某一列的列名和升降序
   * @author 彭庆楠
   * @date 2023-08-17 17:48:41
   * @version V1.0.0
   * @return
   */
  const sortChange = (data: any) => {
    const method = data.order === "ascending" ? "asc" : "desc";
    order.value[0].column = data.prop;
    order.value[0].method = method;
    getData();
  };
  // 删除
  const DeletRow = (row: any) => {
    const formData = new FormData();
    formData.append("houseId", row.houseId);
  };

  /**
   * 查看详情
   */
  const handleDetails = async (row: any) => {
    thresholdDialogVisible.value = true
    tableObj.value = row
  };

  const FilterRef = ref({});

  /**
   * @functionName 重置功能
   * @param {FilterDataType} data
   * @description
   * @author 杜思成
   * @date 2023-08-17 17:55:57
   * @version V1.0.0
   * @return
   */
  const searchReset = (data: FilterDataType) => {
    search.value = data;
    pager.value.currentPage = 1;
    pager.value.pageSize = 10;
    getData();
  };

  /**
   * 初始化
   */
  const getInit = () =>{
    selectOnline().then((res) => {
      onlineNum.value = res.num
    });
    selectCount().then((res) => {
      countNum.value = res.num
    });
  }

  onBeforeMount(() => {
    getData();
    getInit();
  });
</script>
<style scoped>
  .layout-card[data-v-128dcce6] {
    min-height: 100%;
    overflow: hidden;
  }
  .form {
    .el-input {
      width: 150px;
    }
  }
  .el-col {
    margin-bottom: 15px;
  }
  .rughtCol {
    text-align: right;
  }
  .leftCol {
    text-align: left;
  }
</style>

